<template>
  <div class="app-container">
    <el-row :gutter="50">
      <el-col v-for="resource in resources" :key="resource.type" :span="4">
        <recyclable-resource-card
          :resource-type="resource.type"
          :reference-price="resource.referencePrice"
        />
      </el-col>
    </el-row>
    <br />
    <div class="chart-title">账号交易情况</div>
    <order-chart />
    <div class="chart-title">各社区交易情况</div>
    <community-chart />
  </div>
</template>
<style>
.chart-title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}
</style>
<script>
import RecyclableResourceCard from "./component/RecyclableResourceCard.vue";
import OrderChart from "./component/OrderChart.vue";
import user from "@/store/modules/user";
import { getReferResoucre } from "@/api/system/resource";
import { listDetail } from "@/api/system/detail";
import CommunityChart from "./component/CommunityChart.vue";

export default {
  name: "analyse",
  components: {
    RecyclableResourceCard,
    OrderChart,
    CommunityChart,
  },
  data() {
    return {
      resources: [],
    };
  },
  mounted() {
    this.getReferencePrice();
    this.getDetailList();
  },
  methods: {
    getReferencePrice() {
      getReferResoucre().then((response) => {
        this.resources = response.rows;
      });
    },

    getDetailList() {
      listDetail().then((response) => {
        this.detailList = response.rows;
      });
    },
  },
};
</script>
